<template>
  <header>
    <div class="header-return">
      <span class="iconfont iconzuojiantou"></span>
    </div>
    <div class="header-search">
      <span class="iconfont iconsearch"></span>输入城市/景点/游玩主题
    </div>
    <router-link to="/city">
      <div class="header-map">
        <!--{{ city+username }}<span class="iconfont iconsanjiao_xia"></span>-->
        {{ city }}<span class="iconfont iconsanjiao_xia"></span>
      </div>
    </router-link>
  </header>
</template>

<script>
import {mapState, mapMutations} from 'vuex'
// 引入BMap
import BMap from 'BMap'
export default {
  data () {
    return {
      location: null,
      locationCity: ''
    }
  },
  computed: {
    // ...mapState (['city','username'])
    ...mapState(['city'])
  },
  methods: {
    // 定义用于获取定位的方法
    getCity () {
      let _this = this
      var geolocation = new BMap.Geolocation()
      geolocation.getCurrentPosition(function (r) {
        const myGeo = new BMap.Geocoder()
        myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), data => {
          _this.locationCity = data.addressComponents.city.replace('市', '')
          _this.changeCity(_this.locationCity)
        })
      })
    },
    ...mapMutations(['changeCity'])
  },
  created () {
    this.getCity()
  }
}
</script>

<style scoped lang="stylus">
/* @import "../../../assets/css/common.styl" */
/* @import "~@/assets/css/common.styl" */
@import "~css/common.styl"
header
  display: flex
  width: 100%
  line-height: .88rem
  background-color: $bgColor
  font-size: .28rem
  color: #fff
  .header-return
    padding: 0 .2rem
    width: .2rem
    text-align: center
    font-weight: bold
  .header-search
    flex: 1
    color: #e4e7ea
    background-color: #fff
    height: .6rem
    line-height: .6rem
    margin-top: .15rem
    border-radius: .08rem
    padding: 0 .2rem
  a
    color: #fff
    .header-map
      padding: 0 .1rem
</style>
